<template>
  <div class="orders-container">
    <h1>我的订单</h1>
    
    <!-- 订单列表 -->
    <div class="orders-list" v-if="orders.length > 0">
      <div v-for="order in orders" :key="order.orderId" class="order-card">
        <div class="order-header">
          <span class="order-id">订单号：{{ order.orderId }}</span>
          <span class="order-time">{{ order.orderTime }}</span>
        </div>

        <div class="order-items">
          <div v-for="item in order.items" :key="item.id" class="item-preview">
            <img :src="`http://localhost:3005/${item.image}`" :alt="item.title">
            <div class="item-info">
              <h3>{{ item.title }}</h3>
              <p>¥{{ item.price.toFixed(1) }} × {{ item.quantity }}</p>
            </div>
          </div>
        </div>

        <div class="order-footer">
          <div class="total-amount">
            实付金额：<span class="price">¥{{ order.finalAmount.toFixed(1) }}</span>
          </div>
          <button class="detail-btn" @click="viewOrderDetail(order)">查看详情</button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <p>暂无订单</p>
      <button class="primary-btn" @click="router.push('/order')">去点餐</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 订单列表数据
const orders = ref([])
const clearOrdersTimer = ref(null)

// 从localStorage获取订单数据并设置自动清除
onMounted(() => {
  const storedOrders = localStorage.getItem('orders')
  if (storedOrders) {
    orders.value = JSON.parse(storedOrders)
    // 设置一小时后自动清除
    clearOrdersTimer.value = setTimeout(() => {
      localStorage.removeItem('orders')
      orders.value = []
      ElMessage.info('订单记录已自动清除')
    }, 1800000) // 1小时 = 3600000毫秒
  }
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (clearOrdersTimer.value) {
    clearTimeout(clearOrdersTimer.value)
  }
})

// 查看订单详情
const viewOrderDetail = (order) => {
  router.push({
    path: '/shopping/finish',
    query: {
      orderInfo: JSON.stringify(order)
    }
  })
}
</script>

<style scoped>
.orders-container {
  width: 400px;
  padding: 20px;
  padding-bottom: 80px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

h1 {
  text-align: center;
  color: #333;
  font-size: 24px;
  margin-bottom: 30px;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.order-items {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}

.item-preview {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.item-preview:last-child {
  margin-bottom: 0;
}

.item-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  margin-left: 10px;
}

.item-info h3 {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.item-info p {
  margin: 5px 0 0;
  font-size: 12px;
  color: #666;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.total-amount {
  font-size: 14px;
  color: #666;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.detail-btn {
  padding: 6px 12px;
  border: 1px solid #42b883;
  border-radius: 15px;
  background: white;
  color: #42b883;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.detail-btn:hover {
  background: #42b883;
  color: white;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
}

.empty-state p {
  color: #666;
  margin-bottom: 20px;
}

.primary-btn {
  background: #42b883;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-btn:hover {
  background: #3aa876;
}
</style>